import { Modal, Table, Tag, Button } from 'antd'
import { useEffect, useState } from "react"
import { getProcess } from "@/apis/process"
import {
  CheckCircleOutlined,
  SyncOutlined,
  CloseCircleOutlined
} from '@ant-design/icons'
import { getRefer } from '@/apis/refer'



const ProcessModal = ({ isReferOpen, handleCancel, openReferSolution }) => {
  const columns = [
    {
      title: '操作',
      key: 'action',
      align: 'center',
      ellipsis: true,
      fixed: 'left',
      width: 120,
      render: (record) => <Button type='primary' onClick={() => clickButton(record)}>选择</Button>
    },
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      key: 'id',
      width: 100,
      sorter: (a, b) => a.id - b.id,
      fixed: 'left',
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '数据集名',
      dataIndex: 'name',
      align: 'center',
      key: 'name',
      width: 150,
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '客户数',
      dataIndex: 'c_num',
      align: 'center',
      key: 'c_num',
      width: 100,
      sorter: (a, b) => a.c_num - b.c_num,
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '容量类型',
      dataIndex: 'c_type',
      align: 'center',
      key: 'c_type',
      width: 100,
      sorter: (a, b) => a.c_type - b.c_type,
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '时间窗类型',
      dataIndex: 'w_type',
      align: 'center',
      key: 'w_type',
      width: 100,
      sorter: (a, b) => a.w_type - b.w_type,
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '解集数量',
      dataIndex: 'length',
      align: 'center',
      key: 'length',
      width: 100,
      sorter: (a, b) => a.length - b.length,
      render: (text) => <div className='content'>{text}</div>
    },
  ]

  const [data, setData] = useState([])

  const processData = (data) => {
    if (data) {
      return data.txt_files.map((item, index) => {
        let name = item
        let name_split = name.split('_')
        const res = {
          id: index + 1,
          key: index + 1,
          name: name,
          c_num: name_split[1],
          c_type: name_split[2],
          w_type: name_split[3],
          length: data.files_length[index]
        }
        return res
      })
    }
  }

  useEffect(() => {
    const getReferList = async () => {
      const res = await getRefer()
      setData(processData(res))
    }
    getReferList()
  }, [])

  const clickButton = (record) => {
    console.log(record)
    openReferSolution(record.name)
    handleCancel(null)
  }


  return (
    <div>
      <Modal
        title="选择参考解集"
        open={isReferOpen}
        width={1000}
        onOk={() => handleCancel(null)}
        onCancel={() => handleCancel(null)}
        okText="确定"
        cancelText="取消"
      >
        <Table
          columns={columns}
          dataSource={data}
          bordered
          scroll={{
            y: 'calc(100vh - 420px)',
            x: 'max-content',
          }}
        />

      </Modal>
    </div>
  )
}

export default ProcessModal